<template>
    <div id="background">
        <el-container>
            <el-header id="editAddressHeadPosition">
                 <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                    <el-col :xs="3" :sm="3" :md="3" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize">编辑地址</span>
                    </el-col>
                    <el-col :xs="3" :sm="3" :md="3" :offset="5" class="imgCol">
                        <span class="titleSize" @click="editAddressInfo">保存</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main id="editAddressMainPosition">
                <el-row type="flex" style="margin-top:8%">
                    <el-col :xs="5" :sm="5" :md="5" :offset="3" class="imgCol">
                        <span class="editAddressWords">姓名</span>
                    </el-col>
                    <el-col :xs="13" :sm="13" :md="13">
                        <el-input v-model="information.name" class="editAddressInput" clearable></el-input>
                    </el-col>
                </el-row>
                 <el-row type="flex" style="margin-top:8%">
                    <el-col :xs="5" :sm="5" :md="5" :offset="3" class="imgCol">
                        <span class="editAddressWords">电话</span>
                    </el-col>
                    <el-col :xs="13" :sm="13" :md="13">
                        <el-input v-model="information.phone" class="editAddressInput" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row type="flex" style="margin-top:8%">
                    <!--
                    <el-col :xs="4" :sm="4" :md="4" :offset="3" class="imgCol">
                        <span class="editAddressWords">省市区</span>
                    </el-col>
                    <el-col :xs="14" :sm="14" :md="14">
                        <el-input v-model="information.ssq" class="editAddressInput" clearable></el-input>
                    </el-col>-->
                    <el-col :xs="5" :sm="5" :md="5" :offset="3" class="imgCol">
                        <span class="editAddressWords">省市区</span>
                    </el-col>
                    <el-col :xs="13" :sm="13" :md="13">
                    <van-field
                        class="fieldCss"
                        readonly
                        clickable
                        :value="ssqValue"
                        @click="show = true"/>
                    <van-popup v-model="show" position="bottom">
                         <van-area :area-list="areaList" :value="selectedArea" @confirm="confirm" @cancel="cancel"/>
                    </van-popup>
                        <!--<el-cascader size="large" :options="areaList" v-model="selectedArea"> </el-cascader>-->
                    </el-col>
                </el-row>
                <el-row type="flex" style="margin-top:8%">
                    <el-col :xs="5" :sm="5" :md="5" :offset="3" class="imgCol">
                        <span class="editAddressWords">详细地址</span>
                    </el-col>
                    <el-col :xs="13" :sm="13" :md="13">
                        <el-input v-model="information.address" class="editAddressInput" clearable></el-input>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import AreaList from '../../assets/area/area';
//import {  regionDataPlus,CodeToText,TextToCode } from 'element-china-area-data'
import {TextToCode} from 'element-china-area-data'
import { Toast } from 'vant';
export default {
    data(){
        return{
            ssqValue:'',
            show:false,
            areaList:AreaList,
            selectedArea:[],
            id:'',
            /**
             *  "id": 1,
                "name": "测试人员2",
                "phone": "187xxxxxxxx2",
                "province": "辽宁省",
                "city": "沈阳市",
                "area": "和平区",
                "address": "同福客栈180号2",
                "username": "root"
             */
            information:{
                name:'',
                phone:'',
                province:'',
                city:'',
                area:'',
                address:'',
            },
            backIcon:backIcon,
            //normalHeight:document.documentElement.clientHeight,
        }
    },
    mounted(){
        var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("editAddressHeadPosition");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var id=this.$route.query.id;
        this.id=id;
        if(id!=-1){
            this.getAddressInfo();
        }
     
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        confirm(val){
            console.log("comfirm:");
            this.information.province=val[0].name;
            this.information.city=val[1].name;
            this.information.area=val[2].name;
            this.ssqValue=this.information.province+' '+this.information.city+' '+this.information.area;
            this.show=false;
        },
        cancel(val){
            console.log("cancel:");
        },
        //根据id获取地址信息
        getAddressInfo(){
            var URL=this.IP.IP+'/receiptPlace/theReceiptPlace';
            console.log(URL);
            console.log(this.id);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    id:this.id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.information=response.data.data;
                    if(this.information.city=='北京市' || this.information.city=='上海市' || this.information.city=='天津市' ||this.information.city=='重庆市'){
                        this.selectedArea=TextToCode[this.information.province]['市辖区'][this.information.area].code;
                    }else{
                        this.selectedArea=TextToCode[this.information.province][this.information.city][this.information.area].code;
                    }
                    console.log(this.selectedArea);
                    this.ssqValue=this.information.province+' '+this.information.city+' '+this.information.area;
                    console.log(this.ssqValue);
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //编辑地址信息
        editAddressInfo(){
            var URL=this.IP.IP+'/receiptPlace/theReceiptPlaceById';
            console.log(URL);
            this.$ajax({
                method:'post',
                url:URL,
                data:this.information
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    Toast(response.data.data);
                    this.back();
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
 
    }
}
</script>
 <style>
.el-main {
    padding: 0px ;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.editAddressInput .el-input__inner {
    font-size: 1em;
    border: none;
    border-bottom: 1px solid;
    border-color: #F0F0F0;
    background-color: rgba(255, 255, 255, 0);
    color: #707070;
    border-radius: 0px;
}
 .van-cell {
    color: #707070;
    border: none;
    border-bottom: #F0F0F0 1px solid;

}
.van-field__control {
    color: #707070; 
}
#editAddressHeadPosition{
    background-color: #53cdf5;
}
.editAddressWords{
    color: #707070;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
.backSize{
    height: 26px;
}
@media screen and (max-width: 340px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
